<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>注册用户列表</span>
      </div>
      <el-table :data="userList" border stripe>
        <el-table-column
          prop=""
          label="序号"
          type="index"
          fixed="left"
        />
        <el-table-column
          prop="username"
          label="用户名"
        />
        <el-table-column
          prop=""
          label="头像"
        >
          <template v-slot="scope">
            <img style="width:60px;height:60px;border-radius:50%" :src="scope.row.icon" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
        />
        <el-table-column
          prop="realname"
          label="真实姓名"
        />
        <el-table-column
          prop="sex"
          label="性别"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="birthday"
          label="生日"
        />
        <el-table-column
          prop="createTime"
          label="注册时间"
        />
      </el-table>
      <el-pagination
        :current-page="start"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import { findMembersByPage } from '@/api/registeredUser/userList/index'
import mixins from '@/mixins/index'
export default {
  name: 'VueAdminTemplateMasterIndex',
  mixins: [mixins],
  data() {
    return {
      userList: []
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    init() {
      findMembersByPage(this.start, this.limit).then(res => {
        console.log(res)
        this.total = res.data.total
        this.userList = res.data.rows
      })
    }
  }
}
</script>

<style scoped>

</style>
